<template>
  <div class="familys-container">
    <span style="font-size: 15px; margin-top: 4px" v-if="$attrs.type !== 'print'">添加家庭成员</span>
    <div class="family-header" v-for="(item, index) in familyList" :key="index">
      <el-avatar :icon="UserFilled" :src="item.avatarUrl"></el-avatar>
      <div>{{ item.nickName }}</div>
      <div>{{ item.identity ? '(' + item.identity + ')' : '' }}</div>
    </div>
    <el-avatar :icon="Plus" @click="addFamilys" v-if="$attrs.type !== 'print'"></el-avatar>
  </div>
</template>
<script setup>
  import { useStore } from 'vuex'
  import { useRoute } from 'vue-router'
  import { UserFilled, Plus } from '@element-plus/icons-vue'
  import { getBindPatientList } from '@/api/modules/patient.js'
  import { onBeforeMount, ref } from 'vue'
  const props = defineProps({
    pid: Number,
  })

  const route = useRoute()
  const familyList = ref([])
  onBeforeMount(() => {
    getBindPatientList({ patientId: route.query.id })
      .then((res) => {
        familyList.value = res.data
        // console.log('res list =' + JSON.stringify(res))
      })
      .catch(() => {})
  })
  const store = useStore()
  const addFamilys = () => {
    // console.log('addFamilys')
    const qrObject = {
      config: { showTextbar: false },
      data: [
        {
          name: '用户信息',
          text: [
            // eslint-disable-next-line max-len
            `https://devtest.c-sams.com/qrcode?pid=${props.pid}&orgId=${store.getters.userInfo.orgId}&userId=${store.getters.userInfo.userId}&scanType=1`,
          ],
        },
      ],
    }
    store.dispatch('qrcode/setQRCodeShowData', qrObject)
  }
</script>
<style lang="scss" scoped>
  .familys-container {
    margin-top: 12px;
    display: flex;
    color: #606266;
    .family-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 55px;
      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
      & > div {
        margin-top: 4px;
        font-size: 12px;
      }
    }
    .el-avatar {
      // margin-left: 3px;
    }
  }
</style>
